<template>
	<view class="hot-pic-view">
		<view class="topic-item" v-for="(item,index) in list" :key="item.id">
			<topic-item :item="item" :index="index" showRank></topic-item>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				total: 0,
				list: []
			};
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getList()
			} else {
				this.$api.showError('没有更多了~')
			}
		},
		methods: {
			getList() {
				this.$api.requst('/gwc/topics/words', {
					page: this.page,
					size: 30
				}).then((res) => {
					this.total = res.total
					if (this.page === 1) {
						this.list = res.data
					} else {
						res.data.forEach(item => {
							this.list.push(item)
						})
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.hot-pic-view {
		min-height: 100vh;
		background-color: #fff;
		box-sizing: border-box;

		.topic-item {
			padding: 0 24rpx 80rpx;
		}

		.topic-item:first-child {
			padding-top: 44rpx;
		}
	}
</style>